<template>
  <div>
    <!-- 返回顶部按钮 -->
    <div v-if="showBackToTop" class="fixed-btn bottom-[160px] cursor-pointer" @click="scrollToTop">
      <img src="https://cd.sealmg.com/assets/img/dinbu.png" class="btn-img default-img" alt="Back to top button" title="Click to scroll to top" />
      <img src="https://cd.sealmg.com/assets/img/dinbu2.png" class="btn-img hover-img" alt="Back to top hover" title="Click to scroll to top" />
    </div>
    <!-- 客服按钮 -->
    <div class="fixed-btn bottom-[70px]" @click="openCustomerService">
      <img
        src="https://cd.sealmg.com/assets/img/kefu.png"
        class="btn-img default-img"
        alt="Customer service button"
        title="Contact customer support"
      />
      <img src="https://cd.sealmg.com/assets/img/kefu2.png" class="btn-img hover-img" alt="Customer service hover" title="Contact customer support" />
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // key: value,
        // showBackToTop: false,
      }
    },
    props: {
      showBackToTop: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      userInfo() {
        return this.$cookies.get('userInfo') || this.$store.state.user.userInfo || {}
      }
    },
    methods: {
      scrollToTop() {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      },
      openCustomerService() {
        const customerServiceConfig = {
          token: 'fa44bc9b569378ccef22547d83506825',
          baseUrl: 'https://chat.sealmg.com/chat/index',
          defaultAvatar: 'https://cd.sealmg.com/assets/img/avator-img.png'
        }
        const chatParams = {
          token: customerServiceConfig.token,
          uid: this.userInfo?.uid || '',
          nickName: this.userInfo?.nickname || '',
          phone: '',
          sex: '1',
          avatar: this.userInfo?.avatar || customerServiceConfig.defaultAvatar,
          openid: ''
        }
        const queryString = new URLSearchParams(chatParams).toString()
        const chatUrl = `${customerServiceConfig.baseUrl}?${queryString}`
        window.open(chatUrl, '_blank')
      }
    }
  }
</script>
<style lang="less" scoped>
  .fixed-btn {
    width: 5rem;
    height: 5rem;
    position: fixed;
    right: 0;
    z-index: 9999999 !important;
    border-radius: 9999px;
    overflow: hidden;
  }
  .btn-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  .default-img {
    opacity: 1;
    &:hover {
      @media (min-width: 1024px) {
        opacity: 0;
      }
    }
  }
  .hover-img {
    opacity: 0;
    &:hover {
      @media (min-width: 1024px) {
        opacity: 1;
      }
    }
  }
</style>
